[Logs UI] Add shared observability page template and navigation #99380

weltenwort · 2021-05-05T17:08:32Z

📝 Summary

This exposes a navigation registry and a shared page template on the observability setup() and start() contract respectively.

closes #98212

🎨 Previews

🕵️ Review notes

To cause the logs and metrics apps to show up in the sidebar, the following patch could be applied:

M x-pack/plugins/infra/public/plugin.ts
@@ -7,6 +7,7 @@
 
 import { i18n } from '@kbn/i18n';
 import { AppMountParameters, PluginInitializerContext } from 'kibana/public';
+import { of } from 'rxjs';
 import { DEFAULT_APP_CATEGORIES } from '../../../../src/core/public';
 import { createMetricThresholdAlertType } from './alerting/metric_threshold';
 import { createInventoryMetricAlertType } from './alerting/inventory';
@@ -48,6 +49,28 @@ export class Plugin implements InfraClientPluginClass {
         hasData: createMetricsHasData(core.getStartServices),
         fetchData: createMetricsFetchData(core.getStartServices),
       });
+
+      pluginsSetup.observability.navigation.registerSections(
+        of([
+          {
+            label: 'Logs',
+            sortKey: 200,
+            entries: [
+              { label: 'Stream', app: 'logs', path: '/stream' },
+              { label: 'Anomalies', app: 'logs', path: '/anomalies' },
+              { label: 'Categories', app: 'logs', path: '/categories' },
+            ],
+          },
+          {
+            label: 'Metrics',
+            sortKey: 300,
+            entries: [
+              { label: 'Inventory', app: 'metrics', path: '/inventory' },
+              { label: 'Metrics Explorer', app: 'metrics', path: '/explorer' },
+            ],
+          },
+        ])
+      );
     }
 
     pluginsSetup.embeddable.registerEmbeddableFactory(

Progress

…tion

…ts pages

snide · 2021-05-14T03:19:32Z

/oblt-deploy

…tion

weltenwort · 2021-05-19T10:59:51Z

@elasticmachine merge upstream

elasticmachine · 2021-05-26T08:49:29Z

Pinging @elastic/logs-metrics-ui (Team:logs-metrics-ui)

weltenwort · 2021-05-26T08:55:22Z

@katefarrar we'd appreciate a review from the design perspective as well

Kerry350

Changes all look good to me 🎉

Kerry350 · 2021-05-26T11:58:36Z

x-pack/plugins/observability/public/pages/overview/loading_observability.tsx

-      bodyColor={theme.eui.euiPageBackgroundColor}
-    >
-      <CentralizedFlexGroup>
+    <ObservabilityPageTemplate template="centeredBody">


Minor comment, because this works just fine, but the <KibanaPageTemplate /> accepts a isEmptyState prop, if set to true it will look at which content exists (children, header etc) and determine the correct template itself.

That's a good point. I wonder, though, if semantically the loading screen qualifies as an empty state.

@cchaos @katefarrar can you provide any guidance on how to best render full-page loading states with the <KibanaPageTemplate />? We're currently setting template="centeredBody" to display a centered spinner with accompanying loading text.

There isn't anything that the Eui/KibanaPageTemplate provides specifically semantically to indicate empty state. It's purely a visual representation for consistency. Do you have a screenshot of your loading state that I could see for better advice?

I think I noticed the same when I was testing it out. The original loading state sat within a small panel, but now with the new page component, I think it'd make more sense to remove the panel around the loading message and show the content area background? With this new layout, we're always expecting to have the main content area there.

I think it looks ok with just template="centeredContent". What do you think?

@weltenwort I wonder where the background is coming from around the spinner and text? If it's a panel, it supports color="transparent" to avoid it adding that light grey background.

There's no extra panel. The shaded background is also visible in the EUI examples:

Seems I can remove it using pageContentProps={{ color: 'transparent' }} on the template. Does it make sense to deviate from the EUI defaults, though?

Yeah, probably shouldn't go down that route. Let's leave as is, but I'll speak to @cchaos on how we want to handle full page loading states in the new layouts. Thanks for taking a look, and for fixing the original style issue 👍

I talked it over with @formgeist and I'll try to build something into the page template. Though it will most likely still follow the same pattern as the empty state, so I'd suggest using that for now until we have something specific for loading.

weltenwort · 2021-05-26T18:25:54Z

/oblt-deploy

formgeist

@weltenwort Great job on getting the new navigation in - can't wait to get it into all of the apps, so you have the full experience. I noticed some minor things we probably should look into;

If an app is hidden in the Spaces settings, the navigation isn't hidden. The Kibana navigation item is, but the section and links still show, so we should make sure we respect the Space settings.

I mentioned the initial loading state style in a comment above [Logs UI] Add shared observability page template and navigation #99380 (comment) but I guess that comes with us moving from the full page layout to this new split pane design where the background is the same as our panels. We can certainly fix this in another PR related to the Overview, just pointing it out.

Otherwise, I think this is good to go 👍

weltenwort · 2021-05-27T09:14:46Z

Thanks for the review, @formgeist!

If an app is hidden in the Spaces settings, the navigation isn't hidden. The Kibana navigation item is, but the section and links still show, so we should make sure we respect the Space settings.

The patch to add these menu entries is just for demonstration purposes and not part of the PR. Since the side nav can't know about the relation between specific permissions and menu entries, it's up to the registering plugin to guard their registrations. The README puts it like this:

Solutions are expected to handle their own permissions, and what should or should not be displayed at any time, the Observability plugin will not add and remove items for you.

Oh, that panel padding in the loading indicator doesn't look right. I'll take a look at removing the wrapping panel.

formgeist · 2021-05-27T09:35:47Z

The patch to add these menu entries is just for demonstration purposes and not part of the PR. Since the side nav can't know about the relation between specific permissions and menu entries, it's up to the registering plugin to guard their registrations.

Ah, good to know!

Oh, that panel padding in the loading indicator doesn't look right. I'll take a look at removing the wrapping panel.

Thanks!

kibanamachine · 2021-05-27T11:53:17Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`observability`	282	288	+6

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`observability`	460.3KB	461.2KB	+905.0B

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
`observability`	7	9	+2

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`observability`	33.7KB	35.9KB	+2.2KB

Unknown metric groups

async chunk count

id	before	after	diff
`observability`	4	5	+1

References to deprecated APIs

id	before	after	diff
`canvas`	29	25	-4
`crossClusterReplication`	8	6	-2
`fleet`	22	20	-2
`globalSearch`	4	2	-2
`indexManagement`	12	7	-5
`infra`	261	149	-112
`lens`	67	45	-22
`licensing`	18	15	-3
`lists`	239	236	-3
`maps`	286	208	-78
`ml`	121	115	-6
`monitoring`	109	56	-53
`securitySolution`	386	342	-44
`stackAlerts`	101	95	-6
total			-342

History

💚 Build #127284 succeeded c959474
💔 Build #127239 failed 05ad60f
💚 Build #127204 succeeded 15c2810
💔 Build #127234 failed 4107854
💚 Build #127085 succeeded d9640ae

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @weltenwort

katefarrar

I'm still having issues with my local environment, but I was able to look at this with @formgeist. Everything looks great. Thank you all! 👍

…tic#99380) Co-authored-by: Kerry Gallagher <471693+Kerry350@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

kibanamachine · 2021-05-27T15:01:03Z

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.

…) (#100792) Co-authored-by: Kerry Gallagher <471693+Kerry350@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Felix Stürmer <weltenwort@users.noreply.github.com> Co-authored-by: Kerry Gallagher <471693+Kerry350@users.noreply.github.com>

weltenwort added v8.0.0 Team:Infra Monitoring UI - DEPRECATED DEPRECATED - Label for the Infra Monitoring UI team. Use Team:obs-ux-infra_services v7.14.0 labels May 5, 2021

weltenwort added this to the Logs UI 7.14 milestone May 5, 2021

weltenwort self-assigned this May 5, 2021

weltenwort added 4 commits May 6, 2021 17:39

Add and expose observability navigation registry

240e9e6

Ensure app ancestor elements are all .kbnAppWrappers

2da5a42

Add and expose ObservabilityPageTemplate

da3b0f6

Render registered sections in sidebar

73de772

weltenwort force-pushed the obs-shared-navigation branch from c75c61d to 73de772 Compare May 6, 2021 15:42

weltenwort and others added 6 commits May 6, 2021 19:58

Fix some unit tests

4ba587b

Merge remote-tracking branch 'upstream/master' into obs-shared-naviga…

66b38cb

…tion

Merge remote-tracking branch 'upstream/master' into obs-shared-naviga…

b0ed73c

…tion

EuiPageTemplate -> KibanaPageTemplate

3a7bf51

Add docs

9c68901

Use the new ObservabilityPageTemplate component on the cases and aler…

edffa8a

…ts pages

This was referenced May 13, 2021

[Uptime] Implement new solution navigation #100044

Closed

[RUM] Implement new solution navigation #100045

Closed

Kerry350 added 2 commits May 14, 2021 15:42

Unit tests

716a0fe

Merge remote-tracking branch 'upstream/master' into obs-shared-naviga…

8f70f54

…tion

kibanamachine and others added 7 commits May 19, 2021 06:59

Merge branch 'master' into obs-shared-navigation

f2e53e8

Inject stub page template into obs overview story

7fcd976

Use the KibanaPageTemplate as a stub for tests

ca8ac77

Remove initial empty section array

0207eb1

Make page template tests more specific

128e7e0

Remove comments and unused imports

d566116

Merge branch 'master' into obs-shared-navigation

6f70ef9

weltenwort requested review from Kerry350 and katefarrar May 26, 2021 08:49

weltenwort added release_note:enhancement Project:ObservabilitySolutionNavigation Unified Observability Work to make the observability apps more consistent and eventually more unified as a user experience labels May 26, 2021

Kerry350 approved these changes May 26, 2021

View reviewed changes

Kerry350 reviewed May 26, 2021

View reviewed changes

formgeist mentioned this pull request May 26, 2021

[APM] Convert to the new Observability page template and remove tab navigation from the global views #99883

Closed

formgeist reviewed May 27, 2021

View reviewed changes

Merge branch 'master' into obs-shared-navigation

f5b47e2

Fix full-page loading spinner

9f5f622

cchaos mentioned this pull request May 27, 2021

Page layouts/stage 2/stack management #100085

Closed

9 tasks

katefarrar approved these changes May 27, 2021

View reviewed changes

weltenwort added the auto-backport Deprecated - use backport:version if exact versions are needed label May 27, 2021

weltenwort merged commit 06d276e into elastic:master May 27, 2021

weltenwort deleted the obs-shared-navigation branch May 27, 2021 14:58

kibanamachine mentioned this pull request May 27, 2021

[7.x] [Logs UI] Add shared observability page template and navigation (#99380) #100792

Merged

cchaos mentioned this pull request May 27, 2021

[META] 7.14 Solution Nav implementation #98359

Closed

22 tasks

paulb-elastic mentioned this pull request May 28, 2021

[Uptime] Move User Experience (RUM) into the new navigation #100859

Closed

formgeist mentioned this pull request May 31, 2021

[Observability] Add links to Alerts and Cases in the solution navigation #100975

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Logs UI] Add shared observability page template and navigation #99380

[Logs UI] Add shared observability page template and navigation #99380

weltenwort commented May 5, 2021 •

edited

Loading

snide commented May 14, 2021

weltenwort commented May 19, 2021

elasticmachine commented May 26, 2021

weltenwort commented May 26, 2021

Kerry350 left a comment

Kerry350 May 26, 2021

weltenwort May 26, 2021

cchaos May 26, 2021

formgeist May 27, 2021

weltenwort May 27, 2021

formgeist May 27, 2021

weltenwort May 27, 2021

weltenwort May 27, 2021

formgeist May 27, 2021

cchaos May 27, 2021

weltenwort commented May 26, 2021

formgeist left a comment

weltenwort commented May 27, 2021

formgeist commented May 27, 2021

kibanamachine commented May 27, 2021

async chunk count

References to deprecated APIs

katefarrar left a comment

kibanamachine commented May 27, 2021

[Logs UI] Add shared observability page template and navigation #99380

[Logs UI] Add shared observability page template and navigation #99380

Conversation

weltenwort commented May 5, 2021 • edited Loading

📝 Summary

🎨 Previews

🕵️ Review notes

Progress

snide commented May 14, 2021

weltenwort commented May 19, 2021

elasticmachine commented May 26, 2021

weltenwort commented May 26, 2021

Kerry350 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

weltenwort commented May 26, 2021

formgeist left a comment

Choose a reason for hiding this comment

weltenwort commented May 27, 2021

formgeist commented May 27, 2021

kibanamachine commented May 27, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Public APIs missing exports

Page load bundle

async chunk count

References to deprecated APIs

History

katefarrar left a comment

Choose a reason for hiding this comment

kibanamachine commented May 27, 2021

💚 Backport successful

weltenwort commented May 5, 2021 •

edited

Loading